<template>
  <view>
    <hx-navbar ref="hxnb" :config="config" @clickBtn="clickBtn">
      <view slot="bottom">
        <template>
          <view class="input-product">
            <u-search placeholder="搜索或添加产品" v-model="searchData.keywords" @change="onSearchChange"
              :showAction="false"></u-search>
          </view>
        </template>
      </view>
    </hx-navbar>
    <u-loading-page :loading="pageLoading"></u-loading-page>
    <scroll-view scroll-y refresher-enabled show-scrollbar :refresher-triggered="triggered"
      @refresherrefresh="$u.throttle(onRefresherrefresh, 200)" @scrolltolower='$u.throttle(onScrolltolower, 1000)'
      :style="{backgroundColor: '#fff' }">

      <view v-if="listData.length === 0" :style="{ paddingTop: `${screenHeight / 4}px` }">
        <u-empty mode="list" />
        <u-button class="empty-button" type="primary" text="新增" @tap="clickBtn({ key: 'btn1' })"></u-button>
      </view>

      <view class="list-item" v-for="item in listData" :key="item.id">
        <view class="list-item-view" @click="goDetailPage(item)">
          <view class="list-item-avatar">
            <u-avatar shape="square"></u-avatar>
          </view>
          <view class="list-item-text">
            <view class="title">
              <text class="label">{{ item.code }} {{ item.name }}</text>
            </view>
            <view class="bottom">
              <text class="label">针织A</text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import {
  listOptionsPage,
} from '@/apis/bill/goodSpu'

export default {
  name: 'customer-product',
  computed: {

  },
  onLoad() {

  },
  onShow() {
  },
  mounted() {
    this.listPage()
  },
  data() {
    return {
      config: {
        title: "产品",
        color: "#ffffff",
        //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
        backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
        rightButton: [
          {
            key: "btn1",
            icon: "&#xe727;",
            position: "left",
          },
          {
            key: "btn2",
            icon: "&#xe888;",
            position: "left",
          },
        ],
      },
      searchData:{},
      listData: [],
      pageLoading: false,
      triggered: false,
      screenHeight:0,
      pageInfo: {
        current: 1, // 当前页
        size: 15, // 每页数据条数
        order: 'desc', // 排序方向
      },
    }
  },
  methods: {
    goDetailPage(item) {
      uni.$emit("salesStatisticsProduct",item)
      this.$Router.back()
    },
    clickBtn(item) {
      if (item.key === "btn1") {
        uni.navigateTo({
          url: 'pages/application/pages/information/product-information/detail/index'
        })
      }
      if (item.key === "btn2") {
        this.show = true
      }
    },
    onSearchChange() {
      this.handlerSearch()
    },
    onRefresherrefresh() {
      this.triggered = true
      this.listData = []
      this.listPage()
    },
    handlerSearch: _.debounce(function () {
      this.listData = []
      this.pageInfo.current = 1
      this.listPage()
    }, 200),
    listPage() {
      const params = {
        page: this.pageInfo,
        data: this.searchData
      }
      uni.showLoading({
        title: "加载中"
      })
      listOptionsPage(params).then(res => {
        if (!res.data.flag) return
        const records = res.data.data.records || []
        this.listData.push(...records)
      }).finally(_ => {
        this.triggered = false
        this.pageLoading = false
        uni.hideLoading()
      })
    },
    onScrolltolower() { },
  },
  beforeDestroy() {
  },
}
</script>


<style scoped lang="scss">
.pop-view {
  width: 500rpx;
  padding-top: 270rpx;

  .fot-btn {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding-bottom: 20rpx;
  }

  .reset {
    color: #409eff;
    background-color: #e3edff;
  }
}

.popup-bottom-view {
  padding: 20upx 10upx;
}

.tabBarSearch {
  justify-content: space-evenly !important;
  margin-top: 185upx;
  padding-top: 20upx;
  padding-bottom: 20upx;
  border-bottom: 1upx #dadada solid;
  background-color: #fff;

  &.sales {
    margin-top: 110rpx;
  }

  .tabBarSearchItem {
    display: flex;
    flex-direction: row;
    align-items: center;

    .title {
      margin-right: 20upx;
      color: #535353bf;
    }
  }
}

.input-product {
  width: 95%;
  margin: 20upx auto;
  border-radius: 50upx;
  height: 70upx;
  line-height: 70upx;
  color: #fff;
}

.search-title {
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  padding-top: 5rpx;
  padding-bottom: 20rpx;

  .label {
    font-size: 32rpx;
  }

  .warehouse {
    border: 2rpx solid #fff;
    margin-left: 15rpx;
    padding: 5rpx;
  }
}

.list-item {
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  padding: 10px 15px;
  font-size: 15px;
  color: #303133;
  align-items: center;
}

.list-item-view {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.list-item-text {
  flex: 1;
  padding-left: 30rpx;

  .title {
    font-size: 30rpx;
  }

  .bottom {
    margin-top: 20rpx;
    font-size: 26rpx;

    .label {
      color: #ababab;
    }

    .number {
      margin-left: 15rpx;
      color: #29b929;
    }

    .meter {
      margin-left: 15rpx;
      color: #87e0ff;
    }
  }
}

.bottom-submit {
  position: fixed;
  bottom: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 750rpx;
  height: 100rpx;
  background-color: #FFFFFF;
  z-index: 999;
  padding: 10rpx 30rpx;
  padding-top: 15rpx;

  &.sales {
    justify-content: flex-end;
  }

  .info {
    .text {
      .label {
        font-size: 30rpx;
        color: #ababab;
      }

      .value {
        margin-left: 15rpx;
        font-size: 30rpx;
        color: #29b929;

        &.g {
          color: #87e0ff;
        }
      }
    }
  }

  .button {
    width: 50%;
  }
}

.empty-button {
  margin: auto;
  margin-top: 20rpx;
  width: 80%;
}
</style>

